<template>
  <div class="main-mine">
    <div class="page-mine">
      <div class="page-mine-header">
        <div class="header-icon">
          <van-icon name="setting-o" @click="shows = true" />
          <van-action-sheet
            v-model:show="shows"
            :actions="action"
            @select="onSelect"
          />
          <router-link to="/message">
            <van-badge dot>
              <van-icon name="bell" />
            </van-badge>
          </router-link>
        </div>
        <div class="logo-image">
          <van-image
            round
            width="60px"
            height="60px"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <van-sidebar>
            <van-sidebar-item title="小小程序猿" />
            <van-sidebar-item title="个人主页&gt;" replace to="/page" />
          </van-sidebar>
        </div>
      </div>
      <div class="page-mine-body">
        <div class="page-mine-center">
          <div class="center-header">
            <img src="./image/780.jpg" alt="" />
          </div>
          <van-notice-bar scrollable text="开课提醒 2022-11-15" />
          <div class="center-mine">
            <h4>我的账户</h4>
            <van-row>
              <van-col span="8"
                ><van-icon name="pending-payment" />钱包
                <p>首次充值<span class="td">6</span>折起</p>
              </van-col>
              <van-col span="8">
                <van-icon name="orders-o" />优惠卷
                <p><span class="td">3</span>张未使用</p>
              </van-col>
              <van-col span="8"
                ><van-icon name="todo-list-o" />订单
                <p><span class="td">2</span>个未支付订单</p>
              </van-col>
            </van-row>
          </div>
          <div class="page-mine-study">
            <h4>我的学习</h4>
            <van-row>
              <van-col span="6"
                ><van-icon name="replay" />
                <p>缓存视频</p>
              </van-col>
              <van-col span="6"
                ><van-icon name="contact" />
                <p>关注教师</p>
              </van-col>
              <van-col span="6"
                ><van-icon name="records" />
                <p>我的错题</p>
              </van-col>
              <van-col span="6"
                ><van-icon name="star-o" />
                <p>我的收藏</p>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="6"
                ><van-icon name="send-gift-o" />
                <p>我的课程</p>
              </van-col>
              <van-col span="6"
                ><van-icon name="notes-o" />
                <p>学习记录</p>
              </van-col>
              <van-col span="6"
                ><van-icon name="comment-o" />
                <p>我的提问</p>
              </van-col>
            </van-row>
          </div>
          <div>
            <van-cell is-link title="邀请好友" @click="show = true" />
            <van-cell is-link title="联系客服" />
            <van-action-sheet
              v-model:show="show"
              :actions="actions"
              cancel-text="取消"
              close-on-click-action
              @click="onCancel"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default { name: "mine" };
</script>
<script setup>
import { ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
const show = ref(false);
const router = useRouter();
const actions = [{ name: "张三" }, { name: "李四" }, { name: "小强" }];
const onCancel = () =>
  Toast.success({ message: "邀请成功", overlay:true });
const shows = ref(false);
const action = [{ name: "切换账号" }, { name: "注销" }, { name: "" }];
const onSelect = (item) => {
  shows.value = false;
  Toast(item.name);
  if (item.name == "切换账号") {
    router.push("/login/logon");
  }
};
</script>
<style lang="scss" scoped>
.main-mine {
  height: 100%;
  overflow: auto;
}
.page-mine {
  height: 100%;
  &-header {
    width: 100%;
    height: 200px;
    background-color: orange;
    position: relative;
    .header-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 20px;
      display: flex;
      text-align: center;
      .van-icon {
        margin-left: 20px;
        color: #fff;
      }
    }
    .logo-image {
      position: absolute;
      top: 60px;
      left: 30px;
      display: flex;
      .van-sidebar-item {
        background: none;
        padding: 0;
        margin-left: 10px;
        margin-top: 5px;
      }
    }
  }
  &-body {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;

    .page-mine-center {
      width: 100%;
      height: 100%;
      background-color: #fff;
      margin-top: -50px;
      border: 1px solid #fff;
      border-radius: 30px;
      position: relative;
    }
    .center-header {
      width: 100%;
      height: 100px;
      text-align: center;
      margin-top: -20px;
      img {
        width: 90%;
        height: 80px;
        border-radius: 10px;
      }
    }
    .center-mine {
      border: 1px #999999 solid;
      border-radius: 5px;
      margin: 10px;
      padding: 10px;
      box-sizing: border-box;
      p {
        font-size: 12px;
      }
      .td {
        color: red;
        font-size: 16px;
        font-weight: bold;
      }
      .van-col {
        text-align: center;
      }
      .van-icon {
        color: orange;
        font-size: 30px;
      }
    }
    .page-mine-study {
      border: 1px #999999 solid;
      border-radius: 5px;
      margin: 10px;
      padding: 10px;
      box-sizing: border-box;
      .van-col {
        text-align: center;
      }
      .van-icon {
        font-size: 40px;
      }
    }
  }
}
</style>
